<template>
  <div class="table-cpns" v-if="fields.length > 0">
    <!-- 条数组件 -->
    <alert-info :total="total" />
    <!-- 表格组件 -->
    <el-table :data="data" class="table">
      <el-table-column v-if="showIndex" :align="align" type="index" label="序号"></el-table-column>
      <el-table-column
        v-for="item in fields"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :align="align"
      >
        <template #default="{row}">
          <!-- 处理根据不同的值显示不同的内容 -->
          <div v-if="item.dictType">
            {{ row[item.prop] | filterDictType(dict[item.dictType]) }}
          </div>
          <!-- 格式化时间 -->
          <div v-else-if="item.formatTime">
            {{ row[item.prop] | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}") }}
          </div>
          <div v-else-if="item.link">
            <el-link type="primary" :underline="false" @click="$emit('labelClick', row)">{{row[item.prop]}}</el-link>
          </div>
          <div v-else v-html="row[item.prop]"></div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" :align="align" label="操作" width="260">
        <template v-slot="{row}">
          <slot :row="row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-row type="flex" justify="end">
      <page-tool
        :total="total"
        @pageSizeChange="pageSizeChange"
        @onPageChange="onPageChange"
      />
    </el-row>
  </div>
</template>

<script>
import AlertInfo from './alert-info'
import PageTool from '@/module-manage/components/page-tool'
export default {
  components: {
    AlertInfo,
    PageTool
  },
  props: {
    // 表格数据
    data: {
      type: Array,
      default: () => []
    },
    // 表格总条数
    total: {
      type: Number,
      default: 0
    },
    // 是否显示序号
    showIndex: {
      type: Boolean,
      default: false
    },
    // 表头数据
    fields: {
      type: Array,
      default: () => []
    },
    dict: {
      type: Object,
      default: () => {}
    },
    align: {
      type: String,
      default: 'center'
    }
  },
  filters: {
    // 处理数据
    filterDictType (value, array, code = 'value', name = 'label') {
      if (!value && value !== 0) { // 要把0摘出来，一般0都是正常的数据，所以不能只用  !value
        return ''
      }
      const find = array.find(e => (e[code] === value.toString()) || (e[code] === +value)) // 字符型数值型都得匹配
      if (find) {
        return find[name]
      } else { // 没有匹配的就原样返回
        return value
      }
    }
  },
  methods: {
    pageSizeChange (pagesize) {
      this.$emit('pageSizeChange', pagesize)
    },
    onPageChange (page) {
      this.$emit('pageChange', page)
    }
  }
}
</script>

<style scoped lang="scss">
.table {
  margin: 15px 0;
}
</style>
